<template>
    <div>
        <div class="header">
            <div class="header-top">
                <div class="container">
                    <div class="row justify-content-between">
                        <div class="col-xl-5 col-lg-5">
                            <div class="support-bar-left">
                                <ul>
                                    <li><span><i class="fas fa-phone-square"></i></span>+86 13046104102</li>
                                    <li><span><i class="fas fa-envelope"></i></span>201730683055@mail.scut.edu.com</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xl-5 col-lg-5">
                            <div v-if="this.$store.state.isLogin" class="support-bar-right">
                                <ul>
                                    <li>距离上次登录时间：{{ fromLastTime }} Days</li>
                                    <li style="cursor: pointer" @click="logout">退出</li>
                                </ul>
                            </div>
                            <div v-else class="support-bar-right">
                                <router-link :to="'login'" style="color: white; margin-right: 10px">登录</router-link>
                                <router-link :to="'register'" style="color: white;">注册</router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <navigator></navigator>
        </div>
    </div>
</template>

<script>
  import Navigator from "./Navigator"

  export default {
    name: "HeaderVue",
    components: {
      Navigator
    },
    data() {
      return {
        fromLastTime: 1,
      }
    },
    methods: {
      logout() {
        this.$Modal.confirm({
          title: '退出登录',
          content: '确定安全退出登录状态吗？',
          onOk: () => {
            this.$store.state.isLogin = false;
            this.$http.get('/user/logout').then(res => {
              if (res.status === 200) {
                if (res.data.code ===200) {
                  this.$Message.success("成功退出登录")
                  this.$router.replace('/home')
                }
              }
            })
          },
          onCancel: () => {

          }
        });
      }
    }
  }
</script>

<style scoped>
    .logo-img img {
        height: 100px;
    }
</style>